<script setup>
import { ref, onMounted, getCurrentInstance } from 'vue';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
const { proxy } = getCurrentInstance();
const store = useStore();
const router = useRouter();

const value1 = ref("");
const value2 = ref("");
const classTableData = ref({
  lessons: ["一", "二", "三", "四", "五"],
  courses: [
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
  ],
});

onMounted(() => {
  // 假设在组件挂载时初始化班级编号和名称
  classroomNo.value = [
    { value: "", label: "" },
  ];
});

const teachbuildinfo = ref([]);
const classroomNo = ref([]);

//  客户端进行查询班级编号和名称
const queryTeachbuild = async () => {
  const result = await proxy.$api.teachbuildinfoList();
  value2.value = "";
  result.map((v) => {
    teachbuildinfo.value.push({
      value: v.teachBuildNo,
      label: v.teachBuildName,
    });
  })
}

queryTeachbuild();

const queryClassroom = async () => {
  classroomNo.value = []
  const result = await proxy.$api.getAllClassroomByTeachbuild(value1.value);
  result.map((v) => {
    classroomNo.value.push({
      value: v.classroomNo,
      label: v.classroomName,
    });
  })
}

// 查询课程表
const queryCoursePlan = async () => {
  classTableData.value.courses.map((item, index) => {
    classTableData.value.courses[index].splice(
      0,
      classTableData.value.courses[index].length
    );
  });
  console.log( classTableData.value.courses)

  const courseData = await proxy.$api.queryCoursePlanByClassroomNo(value2.value);

  let level = 0;
  let times = 0;

  for (let index = 0; index < courseData.length; index++) {
    times++;
    const item = courseData[index];
    if (parseInt(item.classTime) != times) {
      classTableData.value.courses[level].push("");
      index = index - 1;
    } else {
      classTableData.value.courses[level].push(
        item.realname +
        "-" +
        item.courseName +
        "-" +
        item.classNo
      );
    }
    if (times % 8 == 0) {
      level = level + 1;
    }
  }
  ElMessage({ message: "查询成功", type: "success" });
}

const digital2Chinese = (num, identifier) => {
  const character = [
    "零",
    "一",
    "二",
    "三",
    "四",
    "五",
    "六",
    "七",
    "八",
  ];
  return identifier === "week" && (num === 0 || num === 7)
    ? "日"
    : character[num];
}

const reset = ()=> {
  value1.value = "";
  value2.value = "";

  classroomNo.value = [
    { value: "", label: "" },
  ];
}
</script>


<!-- 课表 -->
<template>
  <div class="class-table">
    <div class="top-select" style="display: flex;">
      <el-select v-model="value1" placeholder="教学楼" @change="queryClassroom">
        <el-option v-for="item in teachbuildinfo" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
      <el-select v-model="value2" placeholder="教室" @change="queryCoursePlan">
        <el-option v-for="item in classroomNo" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>

      <el-button type="primary" @click="reset">重置</el-button>


    </div>
    <div class="table-wrapper">
      <div class="tabel-container">
        <table>
          <thead>
            <tr style="width: 100%;">
              <th>时间</th>
              <th v-for="(weekNum, weekIndex) in classTableData.lessons.length" :key="weekIndex">
                {{ "周" + digital2Chinese(weekIndex + 1, "week") }}
              </th>
            </tr>
          </thead>
          <tbody>
            <tr style="height: 75px;" v-for="(lesson, lessonIndex) in 8" :key="lessonIndex">
              <td>
                <p>{{ "第" + digital2Chinese(lessonIndex + 1) + "节" }}</p>
                <!-- <p class="period">{{ lesson }}</p> -->
              </td>

              <td v-for="(course, courseIndex) in classTableData.lessons" :key="courseIndex">
                <!-- 课程名称-教师-教室-上课时间(01) -->
                {{ classTableData.courses[courseIndex][lessonIndex] || "-" }}
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.class-table {
  display: flex;
  flex-direction: column;
  height: 100%;
  
  .top-select {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 1rem;
    gap: 1rem;

    .el-select {
      width: 200px;
    }
  }

  .table-wrapper {
    flex-grow: 1;
    overflow-y: auto;
    background-color: #F3E5FF; /* 轻柔的紫色背景 */
    border-radius: 8px;
    padding: 1rem;
  }

  .tabel-container {
    table {
      width: 100%;
      border-collapse: collapse;
      
      thead {
        th {
          background-color: #8E44AD; /* 深紫色 */
          color: white;
          font-weight: bold;
          padding: 1rem 0.5rem; /* 增加表头高度 */
          text-align: center;
          font-size: 14px;
          white-space: nowrap; /* 防止文本换行 */
        }
        th,td {
        // 修改第一列的宽度，这里设为50px作为示例，请根据实际需求调整
        &:first-child {
          width: 50px;
        }
      }

        // 允许其他列自动分配剩余空间
        &:not(:first-child) {
          flex-grow: 1;
        }
      }

      tbody {
        tr:nth-child(even) {
          background-color: #F8F9FB; /* 保持原有背景色，或调整为淡紫色系 */
        }
        
        td {
          padding: 0.5rem;
          text-align: center;
          font-size: 14px;
          color: #606266;
          white-space: nowrap; /* 防止文本换行导致的表格变形 */
          overflow: hidden;
          text-overflow: ellipsis; /* 显示省略号 */
        }
        
        td:first-child {
          font-weight: bold;
          color: #303133;
        }
      }
    }
  }

  /* 可选：针对特定屏幕尺寸的调整 */
  @media (max-width: 768px) {
    .top-select .el-select {
      width: 100%;
    }
  }
}
</style>